<template>
  <div >
    <van-nav-bar
      title="我的文章"    
      left-arrow   
      class="page-nav-bar"
      @click-left="$router.back()"
    />
  <div v-if="list.length">
  <van-swipe-cell class="kuang" v-for="item in list" :key="item.id" >
    
    <router-link to="/xiangq" @click.native="indexid(item.id)">
      <div class="lf">
      <h3>{{item.title}}</h3>
      <p class="gray">{{item.content}}</p>
      <span><van-icon name="eye" />收藏({{item.click}})</span> &nbsp;
      <span><van-icon name="good-job" />点赞({{item.lovenum}})</span>
    </div>
    <div class="ri">
      <img :src="'http://124.223.14.236:8060/'+ item.pic" alt="" />
    </div>
    </router-link>
   
   <template #right  >
    <van-button square  class="delete-add">
      <router-link to="/add">
      修改
      </router-link>
    </van-button>
    <van-button square  class="delete-button" @click="quxiao(item.id)">
      删除
    </van-button>
   </template>
  </van-swipe-cell>
  </div>
 <div v-else>
   <p class="jz">您没有发布文章，快去发布吧</p>
   <p class="jz"> 
    <router-link to="/add">
     去发布文章
    </router-link>
  </p>
 </div>
   
  </div>
</template>

<script>
import {wenz,shanwz} from '../../api/shcdz'
export default {
  data() {
    return {
      list:[],
      froms:{
        page:1,
        limit:20,
      },
      shan:""
    }
  },
  created(){
this.wenzhang()
  },
  methods:{
     indexid(idx){
     localStorage.setItem('ids',idx)
     window.location.reload();
  },
    async wenzhang(){
      try {
        let {data} =await wenz(this.froms)
        console.log(data.data.data);
        this.list=data.data.data
      } catch (error) {
        console.log(error);
      }
    },
    async quxiao(val){
      try {
        this.shan=val
        let {data} =await shanwz({id:this.shan})
        console.log(data);
         window.location.reload();
      } catch (error) {
        console.log(error);
      }
    },
  },
   
};
</script>

<style scoped>
   .delete-button {
    height: 130px;
    width: 66px;
    background-color: red;
    margin: 0;
  }
  .delete-add{
    height: 130px;
    width: 66px;
    background-color: rgb(0, 255, 64);
    margin: 0;
  }
  .van-button__text{
color: #000;
font-size: 17px;
  }
  .kuang {
  margin-top: 15px;
  margin-bottom: 15px;
  height: 130px;
  overflow: hidden;
}
span {
  font-size: 14px;
  color: rgb(182, 182, 182);
}
.lf {
  float: left;
  width: 50%;
  margin-left: 16px;
}
.gray {
  margin-top: 10px;
  color: gray;
}
.ri {
  float: right;
  width: 40%;
}
.ri img {
  width: 100%;
  height: 100%;
}
h3{
  width: 200px;
  height: 25px;
  overflow: hidden;
}
p{
  height: 63px;
  overflow: hidden;
}
.jz{
  text-align: center;
}
</style>